<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页面</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/xiangqin.css">
    <style>
        .show {
            position: relative;
        }
        
        .show>.mask {
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: 0.5;
            position: absolute;
            left: 30px;
            top: 40px;
            pointer-events: none;
            /* display: none; */
        }
        
        .left {
            position: relative;
        }
        
        .left>.enlarge {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 110%;
            top: 0;
            overflow: hidden;
            /* background-color: black; */
            /* display: none; */
        }
        
        .left>.enlarge>img {
            display: block;
            width: 800px;
            height: 800px;
            position: absolute;
            z-index: 999;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>

    <div class="header container">
        <span>详情页面</span>

        <p class="active">
            <a href="./index.html">返回首页</a>
            <a href="./list.html">返回列表页</a>
        </p>
    </div>

    <div class="content container">
        <div class="left">
            <div class="show">
                <img src="" alt="">
                <div class="mask"></div>
            </div>
            <div class="enlarge">
                <img src="" alt="">
            </div>
        </div>
        <script src="../js/big.js"></script>
        <script>
            new Magnifier('.left')
        </script>
        <div class="right">
            <p class="title">assdf asdsfasd fsaf是第九行福建省股份施工方函数的规范施工方给回结果环境的 </p>

            <p class="price">
                ￥ 100.00
            </p>

            <div class="size">
                <span>XS</span>
                <span>S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
            </div>

            <button>加入购物车</button>
        </div>
    </div>

    <div class="desc container">
        参数规格信息
    </div>

    <script src="../js/gather.js"></script>
    <script src="../js/xiangqin.js"></script>
</body>

</html>